/**
 * PageTabs - 现代化标签页样式
 * 完美融入系统主题，支持5种配色主题
 */

.page-tabs-container {
  background: var(--theme-bg-primary, #fefefe);
  padding: 8px 16px 0;
  margin: 0 0 24px 0; // 与下方 card 保持 24px 距离
  box-shadow: var(--theme-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--theme-border-light, #e6f3ff);
  border-radius: var(--theme-border-radius-lg, 12px); // 完整圆角
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // 移除装饰线，保持与下方 Card 一致的简洁设计

  .page-tabs {
    :global {
      .ant-tabs-nav {
        margin-bottom: 0;

        &::before {
          border-bottom: none;
        }
      }

      // 标签基础样式
      .ant-tabs-tab {
        background: var(--theme-bg-tertiary, linear-gradient(135deg, #f3f8fe 0%, #eef4fd 100%)) !important;
        border: 1px solid var(--theme-border, #bee3f8) !important;
        border-radius: var(--theme-border-radius-lg, 12px) var(--theme-border-radius-lg, 12px) 0 0 !important;
        margin-right: 6px !important;
        padding: 6px 16px !important;
        min-height: 36px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

        // 标签顶部装饰线
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: var(--theme-primary-gradient);
          opacity: 0;
          transition: opacity 0.3s;
        }

        // 标签文字样式
        .ant-tabs-tab-btn {
          color: var(--theme-text-secondary, #2c5282);
          font-weight: 500;
          font-size: 13px;
          transition: all 0.3s;
        }

        // 悬停效果
        &:hover {
          background: var(--theme-primary-bg, linear-gradient(135deg, rgba(74, 144, 226, 0.08), rgba(53, 122, 189, 0.04))) !important;
          border-color: var(--theme-primary, #4a90e2) !important;
          transform: translateY(-2px);
          box-shadow: var(--theme-shadow, 0 4px 12px rgba(74, 144, 226, 0.2));

          &::before {
            opacity: 0.6;
          }

          .ant-tabs-tab-btn {
            color: var(--theme-primary, #4a90e2);
          }
        }

        // 关闭按钮样式
        .ant-tabs-tab-remove {
          margin-left: 8px;
          color: var(--theme-text-tertiary, #3182ce);
          font-size: 12px;
          opacity: 0.6;
          transition: all 0.3s;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: transparent;

          &:hover {
            opacity: 1;
            color: #ff4d4f;
            background: rgba(255, 77, 79, 0.1);
            transform: scale(1.2);
          }
        }
      }

      // 激活标签样式
      .ant-tabs-tab-active {
        background: var(--theme-bg-primary, #fefefe) !important;
        border-color: var(--theme-primary, #4a90e2) !important;
        border-bottom: 1px solid var(--theme-bg-primary, #fefefe) !important;
        box-shadow: var(--theme-glow, 0 0 20px rgba(74, 144, 226, 0.2)),
          0 4px 12px rgba(74, 144, 226, 0.15);
        z-index: 1;

        &::before {
          opacity: 1;
        }

        .ant-tabs-tab-btn {
          color: var(--theme-primary, #4a90e2);
          font-weight: 600;
        }

        // 激活标签的发光效果
        &::after {
          content: '';
          position: absolute;
          top: -1px;
          left: 0;
          right: 0;
          height: 3px;
          background: var(--theme-primary-gradient);
          border-radius: var(--theme-border-radius-lg, 12px) var(--theme-border-radius-lg, 12px) 0 0;
          box-shadow: 0 0 10px var(--theme-primary, #4a90e2);
        }
      }

      // 隐藏默认的操作按钮
      .ant-tabs-nav-operations {
        display: none;
      }
    }
  }

  // 标签文本容器
  .page-tab-label {
    display: inline-block;
    user-select: none;
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;

    // 标签文本悬停效果
    &:hover {
      color: var(--theme-primary, #4a90e2);
    }
  }
}

// 右键菜单美化
:global {
  .ant-dropdown-menu {
    background: var(--theme-bg-primary, #fefefe) !important;
    border: 1px solid var(--theme-border, #bee3f8) !important;
    border-radius: var(--theme-border-radius-lg, 12px) !important;
    box-shadow: var(--theme-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)) !important;
    padding: 8px !important;
    backdrop-filter: blur(10px);
    overflow: hidden;

    // 菜单项样式
    .ant-dropdown-menu-item {
      border-radius: var(--theme-border-radius, 8px) !important;
      padding: 8px 16px !important;
      margin: 4px 0 !important;
      color: var(--theme-text-secondary, #2c5282) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative;
      overflow: hidden;

      // 菜单项图标颜色
      .anticon {
        color: var(--theme-text-tertiary, #3182ce);
        transition: all 0.3s;
      }

      // 悬停效果
      &:hover {
        background: var(--theme-primary-bg, linear-gradient(135deg, rgba(74, 144, 226, 0.08), rgba(53, 122, 189, 0.04))) !important;
        color: var(--theme-primary, #4a90e2) !important;
        transform: translateX(4px);

        .anticon {
          color: var(--theme-primary, #4a90e2);
        }
      }

      // 禁用状态
      &.ant-dropdown-menu-item-disabled {
        opacity: 0.4;
        cursor: not-allowed;

        &:hover {
          background: transparent !important;
          transform: none;
        }
      }
    }

    // 分割线样式
    .ant-dropdown-menu-item-divider {
      background: var(--theme-border, #bee3f8) !important;
      margin: 8px 0 !important;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-tabs-container {
    padding: 6px 12px 0;

    .page-tabs {
      :global {
        .ant-tabs-tab {
          padding: 4px 12px !important;
          margin-right: 4px !important;
          font-size: 12px;

          .ant-tabs-tab-btn {
            font-size: 12px;
          }
        }
      }
    }

    .page-tab-label {
      max-width: 120px;
    }
  }
}

// 打印时隐藏标签栏
@media print {
  .page-tabs-container {
    display: none;
  }
}

// 滚动条样式优化（当标签很多时）
.page-tabs {
  :global {
    .ant-tabs-nav-wrap {
      &::-webkit-scrollbar {
        height: 3px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: var(--theme-primary, #4a90e2);
        border-radius: 2px;
        opacity: 0.5;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

// 加载动画（可选）
@keyframes tabShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.page-tabs-container {
  .page-tabs {
    :global {
      .ant-tabs-tab {
        // 流光效果（仅在激活标签上）
        &.ant-tabs-tab-active {
          &::before {
            animation: tabShine 3s infinite;
          }
        }
      }
    }
  }
}
